<!-- 总览页面右侧 -->
<template>
  <div class="right-page">
    <div class="give-birth">
      <div class="give-birth-title">
        <div class="give-birth-text">生产用料管理</div>
      </div>
      <div class="give-birth-content">
        <div class="give-birth-forewarn">
          <div>上料预警提醒：<span>30</span>min</div>
        </div>
        <giveBirthCharts />
      </div>
    </div>
    <div class="product-size">
      <div class="give-birth-title">
        <div class="give-birth-text">实时产品尺寸监测</div>
      </div>
      <div class="product-size-content">
        <productSizeCharts />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import giveBirthCharts from "../../../../components/giveBirthCharts.vue";
import productSizeCharts from "../../../../components/productSizeCharts.vue";
</script>

<style scoped lang="scss">
.right-page {
  width: 374px;
  height: 950px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: "PangMenZhengDao";
  padding-right: 39px;
  .give-birth-title {
    width: 374px;
    height: 34px;
    background: url("../../../../assets/images/bgc-title.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 34px;
    font-size: 23px;
    .give-birth-text {
      background: linear-gradient(180deg, #ffffff 0%, #73c0ff 90%);
      -webkit-background-clip: text; /* 确保背景仅应用于文字 */
      -webkit-text-fill-color: transparent; /* 文字颜色透明以显示背景 */
    }
  }
  .give-birth {
    width: 100%;
    height: 257px;
    .give-birth-content {
      height: 226px;
      background: linear-gradient(
        240deg,
        #051522 0%,
        rgba(20, 84, 136, 0.1) 100%
      );
      padding: 10px 15px;
      .give-birth-forewarn {
        width: 316px;
        height: 34px;
        background: url("../../../../assets/images/bgc-material.png") no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        text-align: center;
        line-height: 34px;
        font-size: 14px;
        color: #ffffff;
        font-family: "DingTalkJinBuTi";

        span {
          font-family: "PangMenZhengDao";
          font-weight: 400;
          font-size: 26px;
        }
      }
    }
  }
  .product-size {
    width: 100%;
    height: 667px;
  }
}
</style>


